<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表</title>
    <meta name="keywords" content="文乐文">
    <meta name="description" content="文乐文">

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css">
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="static/css/common.css" type="text/css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="car">
            <img src="./static/image/car.png" alt="" srcset="">
        </div>
        <!-- 包含头部 -->
        <div class="header_box">
            <!-- container-fluid -->
            <div class="header container">
                <div class="logo_box">
                    <img src="static/picture/logo2.png">
                </div>
                <div class="nav_box">
                    <a href="index.html">
                        <div class="item">首页</div>
                      </a>
                      <a href="goods.html">
                        <div class="item">产品中心</div>
                      </a>
                      <a href="integral.html">
                        <div class="item active">积分商城</div>
                      </a>
                      <a href="lease.html">
                        <div class="item">进销存ERP</div>
                      </a>
                      <a href="service.html">
                        <div class="item">服务与支持</div>
                      </a>
                      <a href="my.html">
                        <div class="item ">个人中心</div>
                    </a>
                </div>
                <div class="buy-box">
                    <a href="javascript:;" class="tit">购买</a>
                    <div class="sub" style="display: none;">
                        <div class="list">
                            <a target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">文乐文京东旗舰店</a>
                        </div>
                    </div>
                </div>
                <div class="search_box">
                    <input name="keyword" type="text" class="search_input" id="header_search_input" placeholder="搜索">
                    <button id="header_search_btn" class="search_btn"></button>
                </div>
            </div>
        </div>



        <div class="page_product_list container">
            <div class="title">积分商城/Product list</div>
            <div class="product_list col-sm-12">
                <div class="product_box row">
                    <a :href="'detail.html?id='+item.id+'&type=integral'" v-for="(item,index) in goodslist" :key="index">
                        <div class="item">
                            <div class="img_box"><img :src="item.image"></div>
                            <div class="name">{{item.storeName}}</div>
                        </div>
                    </a>
                </div>
                <div class="page_box row">
                    <el-pagination background layout="prev, pager, next" @change="changePage" :page-size="query.limit"
                        :total="total" />
                </div>
            </div>

        </div>


        <!-- 包含公共底部文件 -->
        <div class="footer">
            <div class="footer_box container">
                <div class="contact_box col-sm-4 f-cb">
                    <div class="dtitle">服务/Service</div>
                    <div class="tel_box">
                        <p class="title">全国统一热线电话</p>
                        <p class="tel">0574-58974484</p>
                    </div>
                    <div class="mail_box">
                        <p class="title">服务邮箱</p>
                        <p class="mail">598292588@qq.com</p>
                    </div>
                </div>
                <div class="nav_list col-sm-4 f-cb">
                    <div class="dtitle">导航/Navigation</div>
                    <ul class="nav_box">
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="">商品中心</a></li>
                        <li><a href="lease.html">打印机租赁</a></li>
                        <li><a href="service.html">服务与支持</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </div>
                <div class="search col-sm-4 f-cb">
                    <div class="dtitle">产品中心/Product center</div>
                    <div class="search_box">
                        <input class="search_input" name="keyword" placeholder="搜索">
                        <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
                        <a class="btn btn-primary jd_btn" target="_blank"
                            href="https://mall.jd.com/index-11504190.html?from=pc">京东商城</a>
                    </div>
                    <div class="wechat_box">
                        <div class="item">
                            <img src="static/picture/wechat.svg">
                        </div>
                        <div class="item">
                            <img src="static/picture/weibo.svg">
                        </div>
                    </div>
                </div>
            </div>

            <div class="site_info container">
                Copyright ©2020 宁波文乐文科技有限公司 版权所有 <a
                    href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020041669号-1</a>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="static/css/index.css" rel="stylesheet">
    <script src="static/js/vue.js"></script>
    <script src="static/js/index.full.js"></script>

    <script src="static/js/jquery.js"></script>
    <script src="static/js/common.js"></script>
</body>

</html>


<script>
    const {
        createApp,
        ref,
        reactive,
        onMounted
    } = Vue

    createApp({
        setup() {
            var goodslist = ref([]);
            var total = ref(0);
            var query = reactive({
                keyword: '',
                priceOrder: '',
                salesOrder: '',
                news: 0,
                page: 1,
                limit: 6,
                cid: 0
            })

            const getGoodslist = () => {
                $.ajax({
                    url: apiurl + '/api/front/pointProducts',
                    data: query,
                     headers: {
                        "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
                    },
                    success: (res) => {
                        total.value = res.data.total
                        goodslist.value = res.data.list
                    },
                })
            }

            const changePage = (e) => {
                query.page = e
                getGoodslist()
            }
            onMounted(() => {
                getGoodslist()
            });

            return {
                query,
                total,
                goodslist,
                getGoodslist,
                changePage
            }
        },
    }).use(ElementPlus).mount('#app')
</script>